import ReactDOM from 'react-dom';
import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import rehypeRaw from 'rehype-raw';
import rehypeStringify from 'rehype-stringify';
import remarkGfm from 'remark-gfm';
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism';

import MatrixViewer from '../visual/MatrixViewer';
import MatView2D, { createRandomPointStyleDict } from '../visual/MatView2D';


const TVisual={
  /////////////////////////////////////////////////////////////////// 页面渲染
  "createRandomPointStyleDict":createRandomPointStyleDict,
  renderMatrix(matrix, el){
    ReactDOM.unmountComponentAtNode(el);

    ReactDOM.render(
      <React.StrictMode>
        <MatrixViewer 
          matrix={matrix}
        />
      </React.StrictMode>,
      el
    ) 
  },
  renderMat(mat, el, labels, separator, pointStyleDict, xrange, yrange){

    ReactDOM.unmountComponentAtNode(el);
    ReactDOM.render(
      <React.StrictMode>
        <MatView2D 
          Mat     = {mat}
          Labels  = {labels}
          XRange  = {xrange}
          YRange  = {yrange}
          Separator = { separator } //{type:'line', w:w.toVector(), b:b}
          PointStyleDict = {pointStyleDict}
        />
      </React.StrictMode>,
      el
    );
  },

  // 渲染md文本到页面
  mdRender(txt, el){
    ReactDOM.unmountComponentAtNode(el);
    ReactDOM.render(
      <ReactMarkdown
        children={txt}
        remarkPlugins={[remarkMath, remarkGfm]}
        rehypePlugins={[rehypeKatex, rehypeRaw ,rehypeStringify]}
        components={{
          code({node, inline, className, children, ...props}) {
            const match = /language-(\w+)/.exec(className || '')
            return !inline && match ? (
              <SyntaxHighlighter
                children={String(children).replace(/\n$/, '')}
                style={dark}
                language={match[1]}
                PreTag="div"
                {...props}
              />
            ) : (
              <code className={className} {...props}>
                {children}
              </code>
            )
          }
        }}
      />,
      el
    )
  }
}

export default TVisual;